import React,{useState} from 'react';
import {Button} from 'antd';
import axios from 'axios';
import { Checkbox, Radio, Typography, Divider } from 'antd';
const { Paragraph } = Typography;

export default function Func(props){
    //创建一个状态   useState use 使用  state 状态  true 为状态的初始值, 返回值是
    // night 状态变量,   setNight 函数, 用来修改状态的
    let [night, setNight] = React.useState(true);
    //事件回调
    const handleClick = () => {
        //修改状态
        setNight(!night)
    }
    // props 属性
    // console.log(props);

    // ref 属性
    const h4 = React.useRef();

    //事件回调
    const setHtml = () => {
        //修改 h4 标签的文本
        h4.current.innerHTML = '眼睛是心灵的窗户';
    }

    //声明一个状态
    let [duanzi, setDuanzi] = React.useState([]);
    //声明事件回调 
    const getDuanzi =async () => {
        //发送请求
        let result = await axios.get('http://api.xiaohigh.com/duanzi?_limit=5');
        //修改段子的内容
        setDuanzi(result.data);
    }

    //模拟生命周期钩子  相当于是 componentDidMount 与 componentDidUpdate 的合体
    React.useEffect(() => {
        //钩子输出 
        console.log('我执行啦');
        //声明异步函数
        async function fn(){
            let result = await axios.get('http://api.xiaohigh.com/duanzi?_limit=10');
            setDuanzi(result.data);
        }
        //调用函数
        fn();
        //模拟 componentWillUnmount
        return () => {
            console.log('我卸载了!!');
        }
    }, [night]) // [] 设置的是, 哪些状态修改之后, 会再次执行回调

    //声明状态
    const [editableStr, setEditableStr] = useState('今天礼拜五, 明天礼拜六, 后天礼拜日, 下次别说了!!');

    return <div style={{padding: '50px', height:'2000px'}}>
        <h2>状态 - state</h2>         
        <h4>至尊宝, 我是 {night ? '青霞' : '紫霞'}</h4> 
        <Button onClick={handleClick}>切换白天与晚上</Button>
        <br/><br/><br /> 

        <h2>属性 - props</h2> 
        <h4>{props.msg}</h4>
        <br/><br/><br/>

        <h2>引用 - ref</h2>
        <h4 ref={h4}></h4>
        <Button onClick={setHtml}>点击修改 H4 的文本内容</Button>
        <br/><br/><br/>

        <h3>发送AJAX请求</h3>
        <Button onClick={getDuanzi}>获取段子</Button>
        <ul>
            {duanzi.map(item => {
                return <li key={item.id}>{item.name}</li>
            })}
        </ul>
        <br/><br/><br/>

        <h3>Antd 可编辑复制的组件</h3>
        <Paragraph editable={{ onChange: setEditableStr }}>{editableStr}</Paragraph>
        <Paragraph copyable>This is a copyable text.</Paragraph>


    </div>
}